<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--      个人资料-->
      <el-col :span="6" :xs="24">
        <el-card v-loading="loading" class="card-box">
          <div slot="header" class="clearfix">
            <span>
              <svg-icon icon-class="profile-info" style="margin-right: 5px" />
              个人信息
            </span>
          </div>
          <div>
            <div class="text-center" style="text-align: center">
              <!--              <userAvatar :user="user" />-->
              {{ user.nickName }}
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />
                登录名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />
                手机号码
                <div class="pull-right">{{ user.phone }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />
                Pre ID
                <div class="pull-right">{{ user.preId }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />
                角色
                <div class="pull-right">{{ roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />
                创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="status" />
                状态
                <div class="pull-right">{{ user.status }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="description" />
                描述
                <div style="margin-top: 10px">{{ user.description }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <!--      基本资料-->
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>
              <svg-icon
                icon-class="baseinfo"
                style="margin-right: 5px"
              ></svg-icon>
              详细信息
            </span>
          </div>
          <el-tabs v-model="activeTab" v-loading="loading">
            <el-tab-pane name="userinfo">
              <span slot="label">
                <svg-icon
                  icon-class="baseinfo"
                  style="margin-right: 5px"
                ></svg-icon>
                基本资料
              </span>
              <base-info
                :userinfo="user"
                @updateInfo="updateBaseInfo"
              ></base-info>
            </el-tab-pane>
            <el-tab-pane name="resetPwd">
              <span slot="label">
                <svg-icon icon-class="pwd" style="margin-right: 5px"></svg-icon>
                修改密码
              </span>
              <reset-pwd :userinfo="user" @resetPwd="resetPwd"></reset-pwd>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import BaseInfo from '@/views/profile/compoents/BaseInfo'
  import ResetPwd from '@/views/profile/compoents/resetPwd'
  import { getAction, putAction } from '@/api/action'
  import { mapGetters } from 'vuex'

  export default {
    name: 'UserBaseInfo',
    components: { ResetPwd, BaseInfo },
    data() {
      return {
        user: {
          userName: 'admin',
          nickName: 'admin-昵称',
          email: 'admin@gmail.com',
          phone: '18100861234',
          createTime: '2020/08/12',
          description: '超级管理员',
        },
        roleGroup: this.getRoleGroup(),
        postGroup: {},
        activeTab: 'userinfo', //当前激活的标签页
        url: {
          list: '/presoftasim/system/user/getBaseInfo',
          getUser: '/presoftasim/system/user/getBaseInfo',
          updateBaseInfo: '/presoftasim/system/user/updateBaseInfo',
          resetPwd: '/presoftasim/system/user/resetPwd',
        },
        loading: true,
      }
    },
    computed: {
      ...mapGetters({
        id: 'user/id',
      }),
    },
    watch: {},
    created() {
      this.getUser()
      this.isResetPwd()
    },
    methods: {
      getUser() {
        getAction(this.url.getUser, { id: this.id })
          .then((response) => {
            if (response.code === 200) {
              // this.submitOk(response.message);
              this.user = response.data
              this.loading = false
            } else {
              this.submitFail(response.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      isResetPwd: function () {
        if (this.$route.query.reset != undefined) {
          this.activeTab = 'resetPwd'
        }
      },
      //获取当前登录账号角色名数组
      getRoleGroup() {
        let roleGroup = []
        let roles = this.$store.state.user.roles
        for (let i in roles) {
          roleGroup.push(roles[i].roleName)
        }
        return roleGroup.toString()
      },
      //修改用户基本信息
      updateBaseInfo: function (data) {
        putAction(this.url.updateBaseInfo, data)
          .then((response) => {
            if (response.code === 200) {
              this.submitOk(response.message)
              this.loading = true
              this.getUser()
              this.loading = false
            } else {
              this.submitFail(response.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      //  修改密码
      resetPwd: function (data) {
        putAction(this.url.resetPwd, data)
          .then((response) => {
            if (response.code === 200) {
              this.submitOk(response.message)
              this.loading = true
              this.getUser()
              this.loading = false
            } else {
              this.submitFail(response.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
    },
  }
</script>

<style scoped>
  .list-group-striped > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .list-group {
    padding-left: 0px;
    list-style: none;
  }

  .list-group-item {
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 11px 0px;
    font-size: 13px;
  }

  .pull-right {
    float: right !important;
  }

  .el-card__header {
    padding: 14px 15px 7px;
    min-height: 40px;
  }

  .el-card__body {
    padding: 15px 20px 20px 20px;
  }

  .card-box {
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 10px;
  }
</style>
